<script setup>
import AddTasks from "./AddTasks.vue"
import deleteRemind from "./deleteRemind.vue"
import addIcon from '../assets/todolist_icon/add.svg?component'
import deleteIcon from '../assets/todolist_icon/delete.svg?component'
import unfinishedIcon from '../assets/todolist_icon/unfinished.svg?component'

</script>


<template>
    <div id="TodoList">
        <header class="flex justify-between items-center">
            <div class="flex">
                <div class="w-2 self-stretch mr-2 my-2 rounded-xl bg-[#b2d9d6]"></div>
                <span class="text-3xl p-3 text-[#585858]">TodoList</span>   
            </div>
           <addIcon @click="add()"></addIcon>
        </header>

        <hr class="mt-1">

        <main>
            <div>
                <table>
                    <tbody>
                        <tr v-for="i in 4" :key="i">
                            <td > <deleteIcon @click="deleteTask()"></deleteIcon> </td>
                            <td > <unfinishedIcon></unfinishedIcon> </td>
                            <td class="mr-5"> 任务 </td>
                            <td class="text-gray-600 "> 任务详情 </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </main>

        <div v-if="showModel" class="overflow-hidden">
            <AddTasks @click="add()"></AddTasks>
        </div>

        <div v-if="showPopup" class="overflow-hidden">
            <deleteRemind @click="deleteTask()"></deleteRemind>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data(){
        return{
            showModel: false,
            showPopup: false,
            token: ''
        };
    },
    created(){
        this.token =  localStorage.getItem('token');

        this.getTasksList();
    },
    computed:{

    },
    methods:{
        getTasksList(){
            axios.get('http://49.232.214.76/normal/getAllTasks',{
                header:{
                    'Authorization': 'Bearer ' + this.token,
                }
            }).then( res =>{
                console.log(res);
            })
        },
        add(){
            this.showModel = !this.showModel;
            console.log(this.showModel);
        },
        deleteTask(){
            this.showPopup = !this.showPopup;
        }
    }
}
</script>


<style scoped>
</style>